<template>
	<div>
		<sports-swiper code="live" class="mt-2" />
		<up-title class="mt-2" icon="zd-live" title-t="app.live" iconColor="#FF6464"></up-title>
		<sports-match-list
			class="mt-2"
			isLive
			:is-league-hot="!sportId"
			v-model:sport-id="sportId"
			subscribe-type="live">
			<template #title>
				<up-toggle-popular class="mr-2" :checked="!sportId" @click="sportId = ''" />
			</template>
		</sports-match-list>
	</div>
</template>
<script lang="ts" setup>
import { UpTitle, UpTogglePopular } from '@/components/up'
import { SportsMatchList, SportsSwiper } from '@/components/sports'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const sportId = ref((route.query.sportId as string) || '')

watch(sportId, () => {
	router.replace({
		query: {
			sportId: sportId.value
		}
	})
})
</script>
